<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备变量监控折线图</title>
    <!-- 使用CDN避免本地资源依赖问题 -->
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <style>
        body {
          margin: 0;
          padding: 0;
          background: transparent;
        }
        #chartContainer {
          width: 90%;               /* 宽度 90% */
          height: 105vh;            /* 高度占屏幕 30% */
          margin: -5vh 2% 0 2%;     /* 上 右 下 左 */
          background: transparent;
        }
    </style>
</head>
<body>
<div id="chartContainer"></div>

<script>
    // 1. 关键修改：使用相对路径（避免硬编码IP导致跨域）
    const API_URL = '/deviceInfo/types/query/avg'; // 新接口
    const MAX_POINTS = 50;
    const REFRESH_INTERVAL = 1000;
    const TIMEOUT = 8000; // 延长超时时间（局域网可能延迟高）

    // 从URL读取参数
    const urlParams = new URLSearchParams(window.location.search);
    const TARGET_VAR = urlParams.get('variableEnName') || "mildMildfurnperf";
    const Y_MIN = urlParams.get('xMin') ? parseFloat(urlParams.get('xMin')) : null;
    const Y_MAX = urlParams.get('xMax') ? parseFloat(urlParams.get('xMax')) : null;
    const EQUIPMENT_NAME = urlParams.get('equipmentName') || "MILD富氧燃烧实验炉";

    let dataPoints = [];
    let isRequesting = false;
    let mainTimer = null;

    const chartDom = document.getElementById('chartContainer');
    if (chartDom) {
      const myChart = echarts.init(chartDom);
      let chartOption = {
        backgroundColor: 'transparent',
        color: ['#57D2FF'],
        tooltip: {
          trigger: 'axis',
          formatter: (params) => `时间：${params[0].name}<br>值：${params[0].value.toFixed(2)}`,
          textStyle: { color: '#ffffff', fontSize: 12 },
          backgroundColor: 'rgba(0, 0, 0, 0.7)',
          padding: 8,
        },
        grid: {
          left: '8%',
          right: '5%',
          bottom: '25%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [],
          boundaryGap: false,
          axisLabel: {
            rotate: 45,
            fontSize: 10,
            interval: 'auto',
            color: '#ffffff'  // 修改 X 轴标签颜色为红色
          },
          axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.6)', width: 1 } },// 修改 X 轴线的颜色为绿色，宽度为1
          splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.2)' } }
        },
        yAxis: {
          type: 'value',
          min: Y_MIN,
          max: Y_MAX,
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.3)', // 刻度线更明显
              width: 1
            }
          },
          axisLabel: {
            color: '#ffffff',// 修改 Y 轴标签颜色
            fontSize: 14,
            formatter: '{value}'
          },
          axisLine: {
            show: true, // ✅ 确保显示轴线
            lineStyle: { color: '#ffffff', width: 1 } // 修改 Y 轴线的颜色，宽度为2
          },
          axisTick: {
            show: true, // ✅ 显示刻度线
            lineStyle: { color: '#ffffff' }
          }
        },
        series: [{
          name: TARGET_VAR,
          type: 'line',
          data: [],
          smooth: true,
          symbol: 'circle',
          symbolSize: 4,
          lineStyle: { width: 2, color: '#57D2FF' },
          itemStyle: { color: '#ffffff' },
          connectNulls: true
        }]
      };
      myChart.setOption(chartOption);

      // 时间格式化函数
      function formatTime(date) {
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');
        return `${hours}:${minutes}:${seconds}`;
      }

      // 处理响应
      function handleResponse(data) {
        const result = data.data;
        if (!result) return;

        const currentTime = formatTime(new Date());
        const currentValue = result.averageValue;

        // 强制转换为数字
        if (!Number.isFinite(currentValue)) return;

        // 添加数据点
        dataPoints.push({ time: currentTime, value: currentValue });

        if (dataPoints.length > MAX_POINTS) {
          dataPoints.shift();
        }

        myChart.setOption({
          xAxis: { data: dataPoints.map(p => p.time) },
          series: [{
            data: dataPoints.map(p => p.value),
            connectNulls: true,   // 避免断点
            showSymbol: false     // 不显示每个点的圆圈，让线更平滑
          }]
        });
      }

      // POST请求逻辑（核心修复）
      function fetchData() {
        if (isRequesting) return;
        isRequesting = true;

        // 2. 关键修复：使用jQuery的$.ajax替代原生XHR（自动处理跨域兼容）
        $.ajax({
          url: API_URL,
          type: 'POST',
          contentType: 'application/json',
          timeout: TIMEOUT,
          data: JSON.stringify({
            equipmentTypeName: EQUIPMENT_NAME
          }),
          success: function(data) {
            handleResponse(data);
          },
          error: function(xhr, status, error) {
            // 3. 详细错误日志（帮助排查问题）
            console.error('请求错误：', {
              status: status,
              error: error,
              responseText: xhr.responseText,
              statusCode: xhr.status
            });
            // 针对性提示
            if (xhr.status === 0) {
              console.error('无法连接到服务器，请检查IP和端口是否正确');
            } else if (xhr.status === 403) {
              console.error('服务器拒绝访问，请检查跨域配置');
            } else if (xhr.status === 404) {
              console.error('请求地址不存在：', API_URL);
            }
          },
          complete: function() {
            isRequesting = false; // 无论成功失败都释放锁
          }
        });
      }

      // 启动定时器（确保图表初始化后执行）
      function startTimers() {
        if (mainTimer) clearInterval(mainTimer);
        mainTimer = setInterval(fetchData, REFRESH_INTERVAL);
        fetchData(); // 立即请求一次
      }

      // 页面完全加载后启动
      window.addEventListener('load', function() {
        startTimers();
        window.addEventListener('resize', () => myChart.resize());
      });

      // 页面关闭清理
      window.onbeforeunload = function() {
        if (mainTimer) clearInterval(mainTimer);
      };
    } else {
      console.error('图表容器 #chartContainer 不存在');
    }
</script>
</body>
</html>
